<template>
  <div>
    <div class="detail-info-imgs">
      <!-- 图片预览 -->
      <div
        v-for="(item, idx) in fileList?.filter((i) => i.fileType === 1)"
        :key="item.url"
        @click="
          show = true;
          startPosition = idx;
        "
      >
        <img :src="item.url" alt="" />
        <span class="circle" @click.stop="emit('delFile', item)" v-if="delFlag">
          <svg-icon icon-class="close" />
        </span>
      </div>

      <!-- 视频预览 -->
      <div
        v-for="item in fileList?.filter((i) => i.fileType === 2)"
        :key="item"
        @click="videoPreRef.toggleShow(item.url)"
      >
        <video>
          <source :src="item.url" />
        </video>
        <span class="circle" @click.stop="emit('delFile', item)" v-if="delFlag">
          <svg-icon icon-class="close" />
        </span>
        <span class="video">
          <svg-icon icon-class="play" />
        </span>
      </div>
    </div>
    <VideoPreview ref="videoPreRef" />
    <VanImagePreview
      v-model:show="show"
      :images="fileList?.filter((i) => i.fileType === 1)?.map((k) => k.url)"
      :start-position="startPosition"
      :closeable="true"
      style="width: 100%; padding: 0"
    >
    </VanImagePreview>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ImagePreview } from "vant";
const VanImagePreview = ImagePreview.Component;
import VideoPreview from "@/components/videoPreview/index.vue";
defineProps({
  delFlag: {
    default: false,
    type: Boolean,
  },
  fileList: Array,
});
const emit = defineEmits(["delFile"]);
const videoPreRef = ref();
const show = ref(false);
const startPosition = ref(0);
</script>

<style lang="less" scoped>
.detail-info-imgs {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  > div {
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 8px;
    img,
    video {
      width: 100%;
      height: 100%;
    }
  }
  .circle {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 20px;
  }
  .video {
    position: absolute;
    top: 40px;
    left: 40px;
    svg {
      width: 32px;
      height: 32px;
    }
  }
  /deep/ .van-image-preview {
    padding: 0;
  }
}
</style>
